import React from 'react';
import styles from './Vip.module.css';

const Model = () => {
  // 用户信息
  const userInfo = {
    phone: "183***44217",
    packageId: "57391342"
  };
  
  // VIP产品数据
  const vipProducts = [
    { 
      id: 1, 
      title: "企业VIP授权", 
      status: "未开通", 
      buttonText: "去咨询", 
      badgeText: "VIP" 
    },
    { 
      id: 2, 
      title: "个人VIP", 
      status: "未开通", 
      buttonText: "立即开通", 
      badgeText: "VIP" 
    },
    { 
      id: 3, 
      title: "在线设计VIP", 
      status: "未开通", 
      buttonText: "开通特权", 
      badgeText: "VIP" 
    },
    { 
      id: 4, 
      title: "智能抠图VIP", 
      status: "未开通", 
      buttonText: "立即体验", 
      badgeText: "VIP" 
    }
  ];
  
  // 展示产品数据（用于悬停效果）
  const showcaseProducts = [
    {
      id: "p1",
      title: "企业VIP授权",
      packageId: "57391342",
      status: "未开通",
      buttonText: "去咨询",
      promoText: "VIP尊享购 · 买企业VIP得正版授权",
      imagePlaceholder: "https://via.placeholder.com/160x120?text=企业VIP"
    },
    {
      id: "p2",
      title: "智能抠图VIP",
      packageId: "59103475",
      status: "未开通",
      buttonText: "立即体验",
      imagePlaceholder: "https://via.placeholder.com/160x120?text=智能抠图"
    },
    {
      id: "p3",
      title: "在线设计VIP",
      packageId: "60213568",
      status: "未开通",
      buttonText: "开通特权",
      promoText: "VIP尊享购 · 巨惠618",
      imagePlaceholder: "https://via.placeholder.com/160x120?text=在线设计"
    }
  ];
  
  // 导航菜单项
  const navItems = [
    { id: 1, text: "个人中心", active: true },
    { id: 2, text: "在线抠图" },
    { id: 3, text: "在线设计" },
    { id: 4, text: "下载记录" },
    { id: 5, text: "收藏记录" },
    { id: 6, text: "退出登录" }
  ];

  return (
    <div className={styles.vipCenter}>
      {/* 顶部区域 */}
      <div className={styles.header}>
        <p className={styles.slogan}>适合90%用户</p>
        <h1 className={styles.title}>VIP授权中心</h1>
      </div>
      
      {/* 账号信息 */}
      <div className={styles.accountInfo}>
        <div>
          <div className={styles.userPhone}>{userInfo.phone}</div>
          <div className={styles.packageId}>包图号: {userInfo.packageId}</div>
        </div>
        <div className={styles.noticeBox}>
          <span className={styles.noticeIcon}>!</span>
          <span>当前账号未获得授权，商用请购买企业VIP</span>
        </div>
      </div>
      
      {/* VIP服务网格区域 */}
      <div className={styles.vipGrid}>
        {vipProducts.map(product => (
          <div key={product.id} className={styles.vipCard}>
            <div className={styles.vipBadge}>{product.badgeText}</div>
            <div className={styles.vipTitle}>{product.title}</div>
            <div className={styles.vipStatus}>{product.status}</div>
            <button className={styles.actionBtn}>
              {product.buttonText}
            </button>
          </div>
        ))}
      </div>
      
      {/* 促销横幅 */}
      <div className={styles.promotionBanner}>
        <div className={styles.promotionTitle}>VIP尊享购</div>
        <div className={styles.promotionSubtitle}>巨惠618</div>
        <div className={styles.promotionHighlights}>限时赠下载账号</div>
        <div>买企业VIP 得正版授权</div>
      </div>
      
      {/* 产品展示区域（实现悬停弹框效果） */}
      <div className={styles.productShowcase}>
        <h3>VIP产品展示</h3>
        <div className={styles.productGrid}>
          {showcaseProducts.map(product => (
            <div key={product.id} className={styles.hoverImageContainer}>
              <img 
                src={product.imagePlaceholder} 
                alt={product.title} 
                className={styles.productImage} 
              />
              
              {/* 悬停弹框 */}
              <div className={styles.hoverPopup}>
                <div className={styles.popupTitle}>{product.title}</div>
                {product.packageId && (
                  <div className={styles.popupId}>包图号: {product.packageId}</div>
                )}
                <div className={styles.popupStatus}>
                  <span>状态:</span>
                  <span className={styles.vipStatus}>{product.status}</span>
                </div>
                <button className={styles.popupBtn}>{product.buttonText}</button>
                {product.promoText && (
                  <div className={styles.popupNotice}>{product.promoText}</div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
      
      {/* 底部导航 */}
      <div className={styles.bottomNav}>
        {navItems.map(item => (
          <div 
            key={item.id} 
            className={`${styles.navItem} ${item.active ? styles.activeItem : ''}`}
          >
            {item.text}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Model;